import React from 'react'
import { render } from 'react-dom'

// oDiv  ==> (虚拟Dom  react元素)
// let oDiv = React.createElement('div', { className: "box" }, ["我是div1111111"])
// let oDiv = <div className="box">
//     我是div1111111222222
// </div>

let oUl = <ul>
    <li>wwwwwwwwwwwwwww111111111111</li>
    <li>22222222---------</li>
    <li>33333333+++++++++++</li>
    <h2>
        标题 <span>12</span>
    </h2>
</ul>

// jsx
// 1. 遇到<  开始解析html
// 2. 遇到{  开始解析js

// 1. npm i babel-cli -g
// 2. npm i babel-preset-react -D
// 3. 配置.babelrc {
//     "presets": ["react"]
// }


render(oUl, document.getElementById('root'), () => {
    console.log('success')
})


// 用jsx文件来写react ==> webpack中不认识jsx文件
// babel  
// npm i babel-cli -g (babel命令)
// npm i babel-preset-react -D (通过react语法来解析)
// 配置.babelrc文件  {
//     "presets": ["react"]
// }
// babel index.jsx -o index.js -w


// 配置webpack 中插件
// html-webpack-plugin()  打包过后自动生成html文件  ==> 本地下载最新版本的webpack  删除自己引用的js
// plugins: [ new HtmlWebpackPlugin({ template: "目标模板" })]
// npm i webpack -g

// 生成react-cli命令
// npx create-react-app 项目名称



